<!-- 
 +----------------------------------------------------------------------
 | 狂团[kt8.cn]旗下KtAdmin是为独立版SAAS系统而生的快速开发框架.
 +----------------------------------------------------------------------
 | [KtAdmin] Copyright (c) 2022 http://ktadmin.cn All rights reserved.
 +----------------------------------------------------------------------
 | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
 +---------------------------------------------------------------------- 
-->
<script setup>
import List from './list.vue'
import Record from './record.vue'
import { ref, reactive, onMounted } from 'vue'
const list1 = reactive(['卡密兑换', '使用记录'])
const currentIndex = ref(0)
const change = (index, item) => {
	currentIndex.value = index
}
</script>

<template>
	<div class="topTabStyle">
		<div class="tabStyleChild" style="width: 160px">
			<div :class="{ tabSelect: index === currentIndex }" v-for="(item, index) in list1" @click="change(index, item)">
				{{ item }}
			</div>
		</div>
		<div>
			<List v-if="currentIndex == 0"></List>
			<Record v-else></Record>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.topTabStyle {
	position: relative;
	height: 65px;
	margin: 20px;
	background: #ffffff;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
	border-radius: 15px;
}

.tabStyleChild {
	width: 280px;
	height: 65px;
	line-height: 65px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #8c8c8c;
	margin-left: 40px;
	display: flex;
	justify-content: space-between;
}

.tabSelect {
	text-align: center;
	color: #208eff;
	border-bottom: 2px solid #208eff;
}

.cardContent {
	background: #ffffff;
	margin-top: 20px;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	margin-bottom: 80px;
	height: 600px;
	overflow: auto;
}
</style>
